<template>
  <div>
    <div class="chainTop">
      <div class="chainTop__inBox">
        <span>开启接龙功能,可以活跃微信群,促进用户下单。</span>
        <div>
          <el-switch
            v-model="checkValue"
            active-color="#2D8CF0"
            inactive-color="#F2F2F2"
            @change="changeOpen"
          ></el-switch>
        </div>
      </div>
    </div>
    <!-- 机器人TODO -->
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="接龙活动" name="Activity"></el-tab-pane>
      <el-tab-pane label="群管机器人" name="Robot"></el-tab-pane>
    </el-tabs> -->
    <component :is="activeName" ref="component"></component>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import Activity from "./common/Activity/ActivityIndex.vue";
import Robot from "./common/Robot/RobotIndex.vue";
import {
  getActivitySetting,
  changeActivitySetting,
} from "@/api/chainActivity/chainActivity";

@Component({
  components: {
    Activity,
    Robot,
  },
})
export default class ChainIndex extends Vue {
  @Ref()
  readonly component: HTMLFormElement;

  /** 是否开启社群接龙 */
  checkValue = false;

  /** 接龙活动相关处理 */
  query = {
    id: "",
  } as any;

  /** 所选择tab */
  activeName = "Activity";

  handleClick(tab) {
    this.activeName = tab.name;
  }

  mounted() {
    this.getActivitySetting();
  }

  /**
   * 获取接龙活动开关状态
   */
  getActivitySetting() {
    getActivitySetting({})
      .then(res => {
        this.checkValue = Boolean(res.data.activityState);
        this.query.id = res.data.id;
      })
      .catch(err => {
        this.$message.error(err || "网络错误");
      });
  }

  /**
   * 控制开启关闭操作
   */
  changeOpen(e) {
    const parma = {
      activityState: Number(this.checkValue),
      id: this.query.id,
    };
    changeActivitySetting(parma)
      .then(() => {
        this.$message.success("设置成功");
        this.getActivitySetting();
      })
      .catch(() => {
        this.checkValue = !e
        // this.$message.error(`网络错误 || ${err}`);
      });
  }
}
</script>

<style lang="scss" scoped>
@include b(chainTop) {
  width: 100%;
  height: 120px;
  background-color: #f4f9fd;
  padding: 15px;
  margin-bottom: 20px;

  @include e(inBox) {
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 25px;
    color: #586884;

    @include m(copyText) {
      color: #2d8cf0;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>
